<template>
  <div >

      <el-upload
        :action="uploadUrl"
        :file-list="list"
        :limit="1"
        :on-exceed="fileOver"
        :on-success="fileLogoSuccess"
        :before-remove="fileLogoRemove"
        :before-upload="beforeUpload"
        list-type="picture-card">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip"  style="color:red">只能上传jpg/png文件，且不超过500kb,只能上传一张图片</div>
      </el-upload>
    <div style="width:100%;text-align: right">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {UploadDownload} from '@/utils/request.js'
  import {yfuInfoToast} from '@/utils/yfuMessage.js'
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        form: {},
        list: [],
        uploadUrl: UploadDownload.upload
      }
    },
    methods: {
      cancel () {
      },
      save () {
        let content = this.$refs.richText.getContent()
        console.log(content)
      },
      // 文件上传超过最大值调用方法
      fileOver (file, fileList) {
        yfuInfoToast('超过上传最大值，请删除生在重新上传！')
      },
      // 头像上传成功的回调
      fileLogoSuccess (response, file, fileList) {
        if (response.statusCode === '200') {
          this.form.smallImage = response.data.id
        } else {
          yfuInfoToast('上传文件不成功，请删除后重新传')
        }
      },
      fileLogoRemove (file, fileList) {
        this.form.smallImage = 0
      },
      beforeUpload (file) {
        if (file.name.indexOf('.png') > 0 || file.name.indexOf('.jpg') > 0) {
          let m = 500 * 1024
          if (file.size > m) {
            yfuInfoToast('文件不能超过500K！')
            return false
          }
        } else {
          yfuInfoToast('格式不正确！')
          return false
        }
      }
    }
  }
</script>

